<template>
    <div class="L_work">
        <div class="header">
            <div class="nav">
            <p> <h3>经营概况</h3> <b v-for="(item,index) in days" :key="index" @click="handleClass(index,item)" :class="index == ind ? 'active':''"> {{item}} </b> </p>
            <p> 更新时间：  {{time}}</p>
        </div>
        <div class="box_one">
            <span>今日订单量 <b>{{Jding}}</b> </span>
            <span>今日支付金额 <b>￥{{Jfu}}</b> </span>
            <span>今日访客数 <b>{{Jke}}</b> </span>
            <span>今日客单价 <b>￥{{Jdan}}</b> </span>
        </div>
        </div>
        <div class="cont">
       <div class="left">
            <div class="nav">
                <h3>待处理事项</h3>
            </div>
            <div class="box_two">
                <span @click="jumpShip(1)">代发货 <b>{{Daifa}}</b> </span>
                <span @click="jumpShip(1)"> 退款中<b>{{Tuikuan}}</b> </span>
                <span @click="jumpShip(2)"> 库存预警 <b>{{Kucun}}</b> </span>
            </div>
        </div>
        <div class="right">
            <div class="nav">
                <h3>常用功能</h3>
            </div>
            <div class="box_two">
                <span @click="L_Three_jump(1)"> <b><i class="el-icon-success" style="color:orange"></i></b> 发布商品  </span>
                <span @click="L_Three_jump(2)"><b><i class="el-icon-success" style="color:orange"></i></b> 订单管理 </span>
                <span @click="L_Three_jump(3)"><b><i class="el-icon-success" style="color:orange"></i></b> 订单发货  </span>
            </div>
        </div>
    </div>
    <div class="footer">
    <div id="main" style="width:800px,height:200px"></div>
    <div class="btn">
        <button v-for="(item,index) in btn" :key="index" :class="index==ind?'active':''" @click="handleActive(index,item)" ref="butn"> {{item}} </button>
    </div>
    </div>
    </div>
</template>

<script>
import {mapState} from 'Vuex'
var colors = ['#5470C6', '#EE6666','#ff9900'];
export default {
    computed:{
        ...mapState("workbench",['Jding','Jfu','Jke','Jdan','Daifa','Tuikuan','Kucun'])
    },
    data(){
        return{
            days:['实时','昨日','近7天','近30天'],
            ind:0, //默认下标
            btn:['按时','按天'],
            ind:0,
            flag:false,
            time:''
        }
    },
    created() {
        //显示精确的时间，精确到秒
        const times=new Date()
        const nian=times.getFullYear()
        const yue=times.getMonth()+1
        const ri=times.getDay()
        const shi=times.getHours()
        const fen=times.getMinutes()
        const miao=times.getSeconds()
        this.time=`${nian}-${yue}-${ri} ${shi}:${fen}:${miao}`
        //获取工作台初始数据
        this.$store.dispatch("workbench/L_work_Chu")
    },
    methods:{
        handleClass(index,item){
            this.ind = index
            //点击时间切换对应时间的数据
            this.$store.dispatch("workbench/L_work_Time",{time:item})
        },
        jumpShip(num){  //点击跳转到代发货页面
            if(num===1){
                this.$router.push('/store/order'); 
            }else{
                if(this.Kucun<10){
                    this.$router.push("/warehouse/stock")
                }
            }
        },
        //点击常用功能跳转路由
        L_Three_jump(num){
            if(num===1){
                this.$router.push(''); 
            }else if(num===2){
                this.$router.push('/order/admin'); 
            }else{
                this.$router.push('/store/order'); 
            }
        },
        createChart() {
        let myChart = this.$echarts.init(document.getElementById("main"));
        var option = {
            color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['成交额', '访问量']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '成交额  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '访问量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '访问量',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '成交额',
            type: 'line',
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
        }
    ]
        };
        myChart.setOption(option);
    },

    createChartTwo(){
            let myChart = this.$echarts.init(document.getElementById("main"));
            var option = {
                color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['2015 降水量', '2016 降水量']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '2015 降水量',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name: '2016 降水量',
            type: 'line',
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
        }
    ]
        }
        myChart.setOption(option);
    },

    handleActive(index,item){
        this.ind = index
        if(item === '按时'){
            this.flag = false;
        }else if(item === '按天'){
            this.flag = true;
        }
    }
},
mounted() {
    this.createChart();
  },
}
</script>

<style>
.header{
        width: 100%;
        height: 120px;
        border: solid 1px #ccc;   
    }
    .nav{
        width: 100%;
        height: auto;
        display: flex;
        padding: 10px;
        justify-content: space-between;
    }
    .active{
        color: blue;
    }
    .box_one{
        width: 100%;
        height: auto;
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
    }
    .box_one span b{
        display: block;
        text-align: center;
        font-size: 26px;
    }
    .cont{
        width: 100%;
        height: 130px;
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
    }
    .cont .left{
        width: 49%;
        border: solid 1px #ccc;
    }
    .cont .right{
        width: 49%;
        border: solid 1px #ccc;
    }
    .nav{
        width: 100%;
        height: auto;
        display: flex;
        padding: 10px;
        justify-content: space-between;
    }
    .box_two{
        width: 100%;
        height: auto;
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
    }
    .box_two span b{
        display: block;
        text-align: center;
        font-size: 26px;
    }
    .footer {
  width: 100%;
  height: 200px;
  border: solid 1px #ccc;
  display: flex;
}
#main{
    width: 800px;
    height: 200px;
}
.btn{
    margin: 20px 0;
}
button{
    width: 80px;
    height: 30px;
    text-align: center;
}
button.active{
    background: blue;
    color: #fff;
}
</style>